// ==================== 通用样式占位符 ====================
%flex-column {
  display: flex;
  flex-direction: column;
}

%flex-full {
  flex: 1;
  overflow: hidden;
}

%disabled-base {
  opacity: 0.6;
  color: #999 !important;
}

%disabled-strikethrough {
  @extend %disabled-base;
  text-decoration: line-through;
}

%disabled-tag {
  @extend %disabled-base;
  filter: grayscale(50%);

  :deep(.n-tag__content) {
    text-decoration: line-through;
  }
}

%disabled-card {
  opacity: 0.7;
  background-color: #fafafa;

  :deep(.n-card__header) {
    background-color: #f0f0f0;
  }
}

%content-card {
  @extend %flex-column;
  height: 100%;

  :deep(.n-card__content) {
    @extend %flex-column, %flex-full;
  }
}

// ==================== 主容器样式 ====================
.user-management {
  @extend %flex-column;
  padding: 16px;
  height: calc(100vh - 120px);
  gap: 16px;

  .main-content {
    @extend %flex-full;
    min-height: 0;
  }

  .content-card {
    @extend %content-card;
  }

  // ==================== 部门树样式 ====================
  .dept-tree {
    @extend %flex-full;
    overflow: auto;

    :deep(.c-tree-container) {
      border: none;
      padding: 0;
      height: 100%;
    }

    :deep(.tree-instance .n-tree .n-tree-node) {
      margin-bottom: 4px;

      .n-tree-node-content {
        padding: 12px 8px;
        border-radius: 6px;
        transition: all 0.2s ease;
        min-height: 44px;
        display: flex;
        align-items: center;
      }
    }
  }

    // ==================== 用户表格样式 ====================
    // 禁用行样式
    :deep(.disabled-row) {
      background-color: #fafafa !important;
      opacity: 0.7;

    &:hover {
        background-color: #f0f0f0 !important;
      }

        td {
          background-color: transparent !important;
    }
  }

  // ==================== 用户名特殊样式 ====================
  .username-cell {
    &.disabled-user {
      position: relative;
      font-weight: 500;

      &::after {
        content: '已禁用';
        position: absolute;
        top: -2px;
        right: -8px;
        font-size: 10px;
        color: #ff4d4f;
        background: #fff1f0;
        border: 1px solid #ffccc7;
        border-radius: 2px;
        padding: 0 2px;
        transform: scale(0.8);
      }
    }
  }

  // ==================== 禁用状态通用样式 ====================
  .disabled-text {
    @extend %disabled-strikethrough;
  }

  .disabled-tag {
    @extend %disabled-tag;
  }

  // ==================== 用户详情样式 ====================
  .user-detail {
    padding: 16px;
    position: relative;

    .disabled-card {
      @extend %disabled-card;
    }

    .disabled-avatar {
      opacity: 0.5;
      filter: grayscale(100%);
    }

    .disabled-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .disabled-text {
      @extend %disabled-strikethrough;
    }

    .disabled-tag {
      @extend %disabled-tag;
    }
  }
}
